﻿
@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link href="~/layui-v2.6.8/layui-v2.6.8/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/layui-v2.6.8/layui-v2.6.8/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <table id="demoTreeTb"></table>
    
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

    <script>

        //（4） 前端：浏览器请求服务器的时候，要带上JWT
        $.ajaxSetup({
            beforeSend: function (xhr) {
                if (localStorage.getItem("token") !== null) {
                    //（4） 前端：浏览器请求服务器的时候，要带上JWT
                    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem("token"));
                }
            }
        });

        layui.config({
            base: '/layui-v2.6.8/layui-v2.6.8/'  // 配置模块所在的目录
        }).use(['treeTable'], function () {

            var $ = layui.jquery;
            var treeTable = layui.treeTable;


            // 渲染树形表格
            var insTb = treeTable.render({
                elem: '#demoTreeTb',
                url: 'https://localhost:44398/api/Menus/GetIndex',
                tree: {
                    iconIndex: 2,           // 折叠图标显示在第几列
                    isPidData: true,        // 是否是id、pid形式数据
                    idName: 'menuID',  // id字段名称
                    pidName: 'parentID',     // pid字段名称
                    openName: 'menuID',
                    getIcon: 'ew-tree-icon-style2'
                },
                cols: [[
                    { type: 'numbers' },
                    { type: 'checkbox' },
                    { field: 'menuName', title: '菜单名称' },
                    { field: 'link', title: '菜单地址' },
                    { field: 'icon', title: '权限标识' }
                ]]
            });
        });
    </script>
</body>
</html>